<template>
	<gracePage statusBarBG="rgba(255,255,255,0)">
		<view slot="gHeader">
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<text class="grace-header-icons grace-icons icon-arrow-left" @tap="goBack"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex grace-h4 grace-bold grace-white grace-text-center">
					个人中心
				</view>
				<!-- 设置按钮 -->
				<view class="grace-white grace-icons icon-set" style="padding-right: 20rpx;" @tap="goSetup"></view>
			</view>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="grace-fixed-top help-bg">
				<view class="grace-list" style="margin-top: 100rpx;margin-left: 60rpx;">
					<view class="grace-list-items">
						<view class="grace-list-image ucenter-face grace-relative">
							<image class="grace-list-image ucenter-face-image" :src="userInfo.avatar"
							 mode="widthFix"></image>
						</view>
						<view class="grace-list-body">
							<view class="grace-list-title">
								<text class="grace-list-title-text">{{userInfo.username}}</text>
							</view>
							<image class="ur-icon-vip" src="../../static/img/center/vip.png" mode="widthFix"></image><text class="grace-list-body-desc">普通会员</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="help-body">
				<view class="grace-grids grace-flex-center grace-box-shadow" style="margin-top:60rpx;">
					<view class="grace-grids-group">
						<image class="ur-icon-redver" src="../../static/img/center/redvertical.png"></image>
						<text class="grace-grids-group-title">我的交易</text>
					</view>
					<view class="grace-grids grace-flex-center">
						<view class="grace-grids-items">
							<view class="grace-grids-icon grace-icons grace-green">
								<image class="ur-icon-center" src="../../static/img/center/row11.png"></image>
							</view>
							<text class="grace-grids-text">我发布的</text>
						</view>
						<view class="grace-grids-items" @tap="goSales">
							<view class="grace-grids-icon grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row12.png"></image>
							</view>
							<text class="grace-grids-text">我卖出的</text>
						</view>
						<view class="grace-grids-items" @tap="goBuys">
							<view class="grace-grids-icon grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row13.png"></image>
							</view>
							<text class="grace-grids-text">我购买的</text>
						</view>
						<view class="grace-grids-items" @tap="goFavorite">
							<view class="grace-grids-icon grace-icons grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row14.png"></image>
							</view>
							<text class="grace-grids-text">我收藏的</text>
						</view>
					</view>
				</view>
				<view class="grace-common-line"></view>
				<view class="grace-grids grace-box-shadow">
					<view class="grace-grids-group">
						<image class="ur-icon-redver" src="../../static/img/center/redvertical.png"></image>
						<text class="grace-grids-group-title">工具应用</text>
					</view>
					<view class="grace-grids grace-flex-center">
						<view class="grace-grids-items" @tap="goTrace">
							<view class="grace-grids-icon grace-icons grace-green">
								<image class="ur-icon-center" src="../../static/img/center/row21.png"></image>
							</view>
							<text class="grace-grids-text">我的足迹</text>
						</view>
						<view class="grace-grids-items">
							<view class="grace-grids-icon grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row22.png"></image>
							</view>
							<text class="grace-grids-text">活动报名</text>
						</view>
						<view class="grace-grids-items">
							<view class="grace-grids-icon grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row23.png"></image>
							</view>
							<text class="grace-grids-text">客服中心</text>
						</view>
						<view class="grace-grids-items" @tap="goMessage">
							<view class="grace-grids-icon grace-icons grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row24.png"></image>
							</view>
							<text class="grace-grids-text">我的消息</text>
						</view>
						<view class="grace-grids-items" @tap="goShoppingCard">
							<view class="grace-grids-icon grace-icons grace-green">
								<image class="ur-icon-center" src="../../static/img/center/row31.png"></image>
							</view>
							<text class="grace-grids-text">我的购物车</text>
						</view>
						<view class="grace-grids-items" @tap="goNotify">
							<view class="grace-grids-icon grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row32.png"></image>
							</view>
							<text class="grace-grids-text">系统通知</text>
						</view>
						<view class="grace-grids-items">
							<view class="grace-grids-icon grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row33.png"></image>
							</view>
							<text class="grace-grids-text">关于我们</text>
						</view>
						<view class="grace-grids-items">
							<view class="grace-grids-icon grace-icons grace-blue">
								<image class="ur-icon-center" src="../../static/img/center/row34.png"></image>
							</view>
							<text class="grace-grids-text">疑问解答</text>
						</view>
					</view>
				</view>
				<view class="ucenter-line"></view>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	var graceChecker = require("../../graceUI/jsTools/graceChecker.js");
	export default {
		data() {
			return {};
		},
		components: {
			gracePage,
			graceFlex,
			graceHeader
		},
		onLoad: function(options) {


		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		methods: {
			//退回
			goBack: function() {
				uni.navigateBack({});
			},
			//设置
			goSetup: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.setup
				})
			},
			//我发布的
			goPublish: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.shoppingCard
				})
			},
			//我卖出的
			goSales: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.saleIndex
				})
			},
			//我购买的
			goBuys: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.orderIndex
				})
			},
			//我收藏的
			goFavorite: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.favoriteIndex
				})
			},
			//我的足迹
			goTrace: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.traceIndex
				})
			},
			//我报名的
			goSignup: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.shoppingCard
				})
			},
			//客服中心
			goServiceCenter: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.shoppingCard
				})
			},
			//我的消息
			goMessage: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.myMessage
				})
			},

			//购物车
			goShoppingCard: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.shoppingCard
				})
			},
			//系统通知
			goNotify: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.notify
				})
			},
			//关于我们
			goAboutus: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.shoppingCard
				})
			},
			//疑问解答
			goProblem: function() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.shoppingCard
				})
			},

		},
	}
</script>
<style>
	page {
		background-color: #F6F7F8;
	}

	.help-bg {
		height: 450rpx;
		background-image: url(../../static/img/center/party.png);
	}

	.help-body {
		width: 680rpx;
		left: 35rpx;
		top: 250rpx;
		position: absolute;
		z-index: 1;
	}

	.grace-grids-group-title {
		line-height: 50rpx;
		width: 100%;
		text-align: left;
		font-size: 32rpx;
		margin-top: 2px;
	}

	.grace-grids {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0;
	}

	.grace-grids-items {
		width: 160rpx;
	}

	.grace-grids-group {
		width: 680rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
	}

	.ur-icon-redver {
		width: 8rpx;
		height: 30rpx;
		padding-right: 10rpx;
	}
    .ur-icon-vip {
    	width: 20rpx;
    	height: 60rpx;
    }
	.ur-icon-center {
		margin: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.ucenter-face{width:120rpx !important; height:120rpx !important;}
	.ucenter-face-image{width:120rpx !important; height:120rpx !important;}
	.grace-list-title-text{font-size:36rpx; color:#000000; line-height:50rpx; width:700rpx; flex:1;}
</style>
